<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script src="js/jquery.1.8.js"></script>
        <script src="js/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <table border="1" width="50%" style="border-collapse: collapse;">
            <tr>
                <th>用户名</th>
                <th>密码</th>
                <th>姓名</th>
            </tr>
            <tr align="center" v-for="item in students">
                <td>{{item.loginName}}</td>
                <td>{{item.pwd}}</td>
                <td>{{item.name}}</td>
            </tr>
            </table>
        </div>
        <script>
            var vm =new Vue({
                el: '#app',
                data: {
                    loginName:'',
                    pwd:'',
                    name:'',
                    students:[]
                },
                methods: {

                },
                created(){
                    var that=this
                    $.get("http://api.tutestudio.net/api/getUser",'',function(res){
                        var json=res.data
                        for(var i=0;i<json.length;i++){
                            that.students.push({loginName:json[i].loginName,pwd,name:json[i].name})
                            console.log(json[i].loginName+json[i].pwd+json[i].name)
                            
                        }

                    })
                }

            })
        </script>
    </body>
</html>